<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 移动端必备设置 -->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!-- 共通的放在上面，专门为本页面的放在下面 -->
		<link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="framework/reset.css" rel="stylesheet">
		<link href="framework/icon.css" rel="stylesheet">
		<link href="css/index.css" rel="stylesheet">
		<script src="js/index.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 总容器，第三个项目方便改 -->
		<div class="wrapper">
			
			<!-- 头部 -->
			<header>
				<div class="icon-location-box">
					<div class="icon-location"></div>
				</div>
				<div class="location-text">天津大学北洋园校区
					<i class="fa fa-caret-down"></i>
				</div>
			</header>
			
			<!-- 搜索框 -->
			<!-- 呈现流畅向上滑动，并且搜索框保留 -->
			<div class="search"><!-- 最外层不脱离文档流 --><!-- 避免跳上去 -->
				<div class="search-fixed-top" id="fixedBox"><!-- 这个以内脱离文档流 -->
					<div class="search-box">
						<i class="fa fa-search"></i>搜索饿了么商家、商品名称
					</div>
				</div>
			</div>
			
			<!-- 点餐分类部分 -->
			<!-- 做一组元素用数组 -->
			<ul class="foodtype"><!-- ：！！！！！！！！！！！！！！！这里也可以改改 -->
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl01.png"/>
					<p>美食</p><!-- 一段文字用p标签 -->
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl02.png"/>
					<p>早餐</p>
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl03.png"/>
					<p>跑腿代购</p>
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl04.png"/>
					<p>汉堡披萨</p>
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl05.png"/>
					<p>甜品饮品</p>
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl06.png"/>
					<p>速食简餐</p>
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl07.png"/>
					<p>地方小吃</p>
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl08.png"/>
					<p>米粉面馆</p>
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl09.png"/>
					<p>包子粥铺</p>
				</li>
				<li onclick="location.href='businessList.html'">
					<img src="img/dcfl10.png"/>
					<p>炸鸡炸串</p>
				</li>
			</ul>
			
			<!-- 横幅广告部分 -->
			<div class="banner">
				<!-- 标题用h标签 -->
				<h3>品质套餐</h3>
				<!-- 一段文字 -->
				<p>搭配齐全吃的好</p>
				<!-- 超链接用a标签 -->
				<a>立即抢购 &gt;</a><!-- 箭头用转义字符 --><!-- 一个空格可以直接空，多个空格要用转义字符 -->
			</div>
			
			<!-- 超级会员部分 -->
			<div class="supermember">
				<div class="left">
					<img src="img/super_member.png"/>
					<h3>超级会员</h3>
					<p>&#8226; 每月享超值权益</p>
				</div>
				<div class="right">
					立即开通 &gt;<!-- 点击部分不一定非要a标签 -->
				</div>
			</div>
			
			<!-- 推荐商家部分 -->
			<div class="recommend">
				<div class="recommend-line"></div>
				<p>推荐商家</p>
				<div class="recommend-line"></div>
			</div>
			
			<!-- 推荐方式部分 -->
			<ul class="recommendtype">
				<li>综合排序<i class="fa fa-caret-down"></i></li>
				<li>距离最近</li>
				<li>销量最高</li>
				<li>筛选<i class="fa fa-filter"></i></li>
			</ul>
			
			<!-- 推荐商家列表部分 -->
			<ul class="business">
				<li>
					<img src="img/sj01.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>万家饺子（软件园E18店）</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div><!-- 可以设行类样式 -->
								<!-- style="background-color: #f1884f"加在class之后 -->
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/sj02.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>小锅饭豆腐馆（全运店）</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/sj03.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>麦当劳麦乐送（全运路店）</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/sj04.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>米村拌饭（浑南店）</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/sj05.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>申记串道（中海康城店）</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/sj06.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>半亩良田排骨米饭</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/sj07.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>茶兮鲜果饮品（国际软件园店）</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/sj08.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>唯一水果捞（软件园E18店）</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/sj09.png">
					<div class="business-info">
						<div class="business-info-h">
							<h3>满园春饼（全运路店）</h3>
							<div class="business-info-like">&#8226;</div><!-- ：不喜欢这个符号 -->
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion-i">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户首单立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion-ii">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
			
			<!-- 底部菜单 -->
			<ul class="footer">
				<li onclick="location.href='index.html'">
					<i class="fa fa-home"></i>
					<p>首页</p>
				</li>
				<li>
					<i class="fa fa-compass"></i>
					<p>发现</p>
				</li>
				<li onclick="location.href='orderList.html'">
					<i class="fa fa-file-text-o"></i>
					<p>订单</p>
				</li>
				<li>
					<i class="fa fa-user-o"></i>
					<p>我的</p>
				</li>
			</ul>
		</div>
	</body>
</html>